<template>
    <!-- 水质现状对比分析 -->
    <div class="water-contrast-analysis-page">
      <div class="analysis-object-tree-warp">
        <water-radio-tree  @getCheckedNodes = 'getSiteCheckedNodes'></water-radio-tree>
      </div>
      <div class="secondary-page-content">
        <el-scrollbar class="page-content-scroll">
          <water-contrast-analysis-area
            v-if="openPage === 'area' || openPage === 'river'" :nodes="siteChecked">
          </water-contrast-analysis-area>
          <water-contrast-analysis-station
            v-if="openPage === 'station'" @openChart = 'openChartDialog' :nodes="siteChecked">
          </water-contrast-analysis-station>
        </el-scrollbar>
      </div>
      <!-- 监测因子排放趋势分析图 -->
      <el-dialog
        width='740px'
        :visible.sync = "analysisDiagram"
        :title = "dialogTitle"
        :before-close = "beforeClose">
        <div class="trend-analysis-wrap">
          <div id="trend-analysis-chart"></div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import waterRadioTree from '@/components/waterRadioTree'
    import waterContrastAnalysisArea from './waterContrastAnalysisA'
    import waterContrastAnalysisStation from './waterContrastAnalysisB'
    import slDialog from '@/components/dialog'
    export default {
        name: "waterContrastAnalysis",
        data(){
          return{
            analysisDiagram:false,
            siteChecked:[],
            openPage:'area',
            dialogData:'',
            dialogTitle:''
          }
        },
        methods:{
          beforeClose(){
             this.analysisDiagram = false;
          },
          openChartDialog(data){
            this.analysisDiagram = true;
            this.dialogTitle = '监测因子排放趋势分析图--'+data.name;
            setTimeout(()=>{
              this.trendAnalysisChart();
            },100)
          },
          getSiteCheckedNodes(nodes){
            this.siteChecked = nodes;
            this.openPage = nodes.structureType;
          },
          trendAnalysisChart(){
            let mrChart = this.$echarts.init(document.getElementById('trend-analysis-chart'));
            let option = {
              color:["#cea916","#11c053"],
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data:['2018年6月','2017年6月'],
                bottom:10
              },
              grid: {
                top: 10,
                left: 40,
                right: 20,
                bottom: 50,
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['07-09','07-10','07-11','07-12','07-13','07-14','07-15'],
                axisTick:{
                  show:false
                },
                axisLine:{
                  lineStyle:{
                    color:"#c6d1de"
                  }
                },
                axisLabel:{
                  color:"#999"
                },
                splitLine:{
                  show:true
                }
              },
              yAxis: {
                type: 'value',
                name:'监测值',
                nameLocation:"middle",
                nameTextStyle:{
                  color:"#999"
                },
                nameGap: 40,
                axisTick:{
                  show:false
                },
                splitNumber:9,
                axisLine:{
                  lineStyle:{
                    color:"#c6d1de"
                  }
                },
                axisLabel:{
                  color:"#999"
                }
              },
              series: [
                {
                  name:'2018年6月',
                  type:'line',
                  symbolSize: 10,
                  data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name:'2017年6月',
                  type:'line',
                  symbolSize: 10,
                  data:[210, 182, 191, 234, 270, 310, 370]
                }
              ]
            };
            mrChart.setOption(option);
            mrChart.resize();
          }
        },
        mounted(){

        },
        created(){
             this.$store.commit("setShowlefttree", false);
        },
        components:{
          waterRadioTree,
          waterContrastAnalysisArea,
          waterContrastAnalysisStation,
          slDialog
        }
    }
</script>

<style scoped lang="less">
.water-contrast-analysis-page,
.page-content-scroll{
  height: 100%;
}
#trend-analysis-chart{
  height: 378px;
  width: 698px;
}
</style>
